{% extends "base.html" %}

{% block content %}
    <style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form" method="post" action="">
  <input type="hidden" name="csrf_token" value="{{ csrf_token()}}"/>
  <div class="demo-reg-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写username" autocomplete="off" class="layui-input" id="reg-cellphone">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-email"></i>
        </div>
        <input type="text" name="email" value="" lay-verify="required|email" placeholder="邮箱" lay-reqtext="请填写email" autocomplete="off" class="layui-input" id="reg-cellphone">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
    </div>
    <div class="layui-form-item demo-reg-other">
      <h3><a type="button" class="layui-btn layui-btn-fluid layui-bg-blue" href="{{url_for('login')}}">登录</a></h3>
    </div>
  </div>
</form>
<script>
  layui.use(['form','layer'],function(){

      var form = layui.form;
      var layer = layui.layer;
      var $ = layui.jquery;

        // 提交事件
      form.on('submit(demo-reg)', function(data){
          var field = data.field; // 获取表单字段值

          if(field.password != field.confirmPassword){  
              layer.msg("两次输入的密码不一致，请重新输入",{icon:2,time: 1500})
              return false
          }
          // 此处可执行 Ajax 等操作
          $.post("{{url_for('register')}}",{'username':field.username,'password':field.password,'email':field.email,'csrf_token':field.csrf_token},function(res){
            if(res.code==200){
              layer.msg(res.msg,{icon:1,time: 1500},function(){
                  window.location.href = res.url
              })
            }else{
              layer.msg(res.msg,{icon:2,time: 1500})
              return false
            }
        })
          
          return false; // 阻止默认 form 跳转
      });
  

  })
</script>
{% endblock %}